<%--
  Created by IntelliJ IDEA.
  User: 凡人
  Date: 2021/11/22
  Time: 10:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!--视口 自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.js" rel="script"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.js" rel="script"></script>
    <script src="${pageContext.request.contextPath}/static/My97DatePicker/WdatePicker.js" rel="script"></script>

</head>
<body>
    <h3>
        下单页面
    </h3>
    <form action="./add" method="post">
        订单编号:<input type="text" readonly="readonly" name="orderid" value="${l}">
        下单时间:<input type="text" name="odate" readonly="readonly" onclick="WdatePicker()"><br>
        仓库:
            <select name="depot">
                <option value="">-请选择-</option>
                <option value="A仓库">A仓库</option>
                <option value="B仓库">B仓库</option>
                <option value="C仓库">C仓库</option>
                <option value="D仓库">D仓库</option>
            </select>
        订货人:<input type="text" name="orderer"><br>
        库位:<input type="text" name="place">
        物流单号:<input type="text" name="number"><br>
        总金额:<input type="text" name="oprice">
        附件成本:<input type="text" name="cost"><br>
        折让金额:<input type="text" name="discount">
        制单人编号:<input type="text" name="user.uid" value="${user.userid}">
        制单人:<input type="text" name="user.user" value="${user.user}"><br>
        交货方式:
            <select name="way">
                <option value="">请选择</option>
                <option value="送货上门">送货上门</option>
                <option value="站点自提">站点自提</option>
            </select>
        交货地点:<input type="text" name="site"><br>
        <table class="table table-hover">
            <tr>
                <td>
                    <a href="JavaScript:void(0)" onclick="addCol()">添加</a>
                </td>
            </tr>
            <tr>
                <th scope="col">商品编号</th>
                <th scope="col">商品名称</th>
                <th scope="col">型号</th>
                <th scope="col">单价</th>
                <th scope="col">数量</th>
                <th scope="col">金额</th>
                <th scope="col">备注</th>
            </tr>
            <tbody id="tbody">
                <tr>
                    <td><input type="text" name="details[0].code"></td>
                    <td><input type="text" name="details[0].name"></td>
                    <td><input type="text" name="details[0].model"></td>
                    <td><input type="text" name="details[0].price" onblur="js(0)"></td>
                    <td><input type="text" name="details[0].num" onblur="js(0)"></td>
                    <td><input type="text" class="sum" name="details[0].sum"></td>
                    <td><input type="text" name="details[0].content"></td>
                </tr>
            </tbody>
            <tr>
                <td colspan="100">
                    <input type="submit" value="提交">
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    function js(n){
        var price = $("[name='details["+n+"].price']").val();
        var num = $("[name='details["+n+"].num']").val();
        if((price*num)!=0){
            $("[name='details["+n+"].sum']").val(price*num);
        }
        sum();
    }
    function sum(){
        var s = 0;
        $(".sum").each(function(){
            s += Number($(this).val());
        })
        $("[name='oprice']").val(s);
    }



    var i= 0;
    function addCol(){
        $("#tbody").append('<tr>' +
            '<td><input type="text" name="details['+i+'].code"></td>' +
            '<td><input type="text" name="details['+i+'].name"></td>' +
            '<td><input type="text" name="details['+i+'].model"></td> ' +
            '<td><input type="text" name="details['+i+'].price" onblur="js('+i+')"></td> ' +
            '<td><input type="text" name="details['+i+'].num" onblur="js('+i+')"></td> ' +
            '<td><input type="text" class="sum" name="details['+i+'].sum"></td> ' +
            '<td><input type="text" name="details['+i+'].content"></td> ' +
            '<td><a href="JavaScript:void(0)" onclick="delCol(this)">删除</a> </td> ' +
            '</tr>')
        i++;
    }

    function delCol(obj){
        $(obj).parent().parent().remove();
    }
</script>
<style>
    tbody input{
        width: 150px;
    }
</style>
</html>
